<template>
  <div class="dialog">
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      :width="width"
      @close="close"
      :append-to-body="appendToBody"
    >

      <!--  搜索框   -->
      <div>
        <slot name="search" />
      </div>

      <!--  操作框  -->
      <div class="operator">
        <slot name="operate" />
      </div>

      <!--   table   -->
      <div>
        <slot name="table" />
      </div>

      <span slot="footer" class="dialog-footer">
          <el-button @click="close">取 消</el-button>
          <el-button type="primary" @click="confirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  // 新增/编辑组件
  export default {
    props: {
      width: {
        type: String,
        default: '30%'
      },
      title: {
        type: String,
        default: '提示'
      },
      visible: {
        type: Boolean,
        default: false
      },
      appendToBody: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        dialogVisible: false
      }
    },
    watch:{
      'visible':{
        handler(val) {
          this.dialogVisible = val;
        },
        immediate: true
      }
    },
    methods: {
      //确认
      confirm() {
        this.$emit("confirmDialog", false);
      },

      // 取消
      close() {
        this.$emit("closeDialog", false);
      }
    }
  }
</script>

<style lang="scss" scoped>
  .operator {
    margin-bottom: 10px;
  }
</style>
